<template>
    <div style="margin-left: 70px" class="mt-print">
        <div style="display: flex">
            <span style="margin-left: 50px;width: 200px">{{ form.shipAgentName }}</span>
        </div>
        <div style="display: flex;margin-left: 100px;margin-top: 10px">
            <span style="width: 150px">{{ form.startTime.split(' ')[1] }}</span>
            <span style="width: 150px">{{ form.finishTime }}</span>
            <span style="width: 300px">{{ form.startTime.split(' ')[0] }}</span>
        </div>
        <div style="margin-top: 80px">
            <div style="display: flex;">
                <span style="width: 100px"></span>
                <span style="width: 130px"></span>
                <span style="width: 100px"></span>
                <span style="width: 200px">{{ form.packing }}</span>
                <span style="width: 500px">{{ form.damagedExplan }}</span>
            </div>
        </div>

    </div>
</template>

<script>
    import { getPlanList } from '@/api/planList/planList.js'

    export default {
        name: "unboxPrint",
        data() {
            return {
                form:{}
            }
        },
        created(){
            const id=this.$route.params.id
            const params={
                search_EQ_containerId:id,
                search_EQ_type : 'CX'
            }
            getPlanList(params).then(res=>{
                this.form=res.data.data.aaData[0]
                this.$nextTick(()=>{
                    console.log('打印')
                })
            })
        },
        mounted() {

        },
        methods: {}
    }
</script>

<style scoped>
    .mt-20{
        margin-top: 20px;
    }
    .mt-32{
        margin-top: 32px;
    }
    .mt-35{
        margin-top: 35px;
    }
    .mt-40{
        margin-top: 40px;
    }
    .mt-45{
        margin-top: 45px;
    }
    .mt-50{
        margin-top: 50px;
    }
    .mt-60{
        margin-top: 60px;
    }
    .mt-70{
        margin-top: 70px;
    }
    .mt-80{
        margin-top: 80px;
    }
    .mt-85{
        margin-top: 85px;
    }
    .mt-print {
        margin-top: 315px !important;
        font-size: 14px;
    }
    .mt-print-total {
        margin-top: 265px !important;
        font-size: 14px;
    }
    .mt-print-detail{
        margin-top: 260px !important;
        font-size: 14px;
    }
    .mt-print-damage{
        margin-top: 240px !important;
        font-size: 14px;
    }
    .mt-print-port{
        margin-top: 180px !important;
        font-size: 14px;
    }
    .print-flex {
        display: flex;
    }

    .print-warp {
        display: flex;
        flex-wrap: wrap;
    }

    .page-next {
        page-break-after: always;
    }
    .print-other-line{
        position:relative;
        width:500px;
        box-sizing:border-box;
        border:1px solid;
        line-height:120px;
        text-indent:5px;
    }
    .print-other-line::before{
        content:"";
        position:absolute;
        left:0;
        top:0;
        width:100%;
        height:250px;
        box-sizing:border-box;
        border-bottom:1px solid;
        transform-origin:bottom center;
        transform:rotateZ(-45deg) scale(1.414);
        animation:slash 5s infinite ease;
    }
    .set{
        width: 500px;
        background: #000;
        transform-origin:bottom center;
        transform:rotateZ(-45deg) scale(1.414);
        height: 1px;
    }
</style>
